<template>
<div>
   
        <div class="cropper-content" >
            <div class="cropper">
                <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType" :info="true" :full="option.full" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :original="option.original" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" @imgLoad="imgLoad" :emptyColor="option.emptyColor"></vueCropper>
            </div>
            <div class="box-preview">
                    <div class="show-preview">
                        <div :style="previews.div" class="preview">
                            <img :src="previews.url" :style="previews.img">
                        </div>
                    </div>

                    <div class="show-preview">
                        <div :style="previews.div" class="preview-square">
                            <img :src="previews.url" :style="previews.img">
                        </div>
                    </div>

            </div>
        </div>
  

        <div class="info-item" style="flex:1;">
            <label class="btn btn-orange" for="uploads" >选择图片</label>
            <input type="file" id="uploads" :value="imgFile" style="position:absolute; left:-9999px;" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)">
            <button class="btn" type="primary" @click="changeScale(1)">放大</button>
            <button class="btn" type="primary" @click="changeScale(-1)">缩小</button>
            <button class="btn" type="primary" @click="rotateLeft">左旋转</button>
            <button class="btn" type="primary" @click="rotateRight">右旋转</button>
            <button class="btn btn-blue" type="primary" @click="getBase64">提交</button>
        </div>

</div>
</template>

<script>
//https://github.com/xyxiao001/vue-cropper
//https://www.cnblogs.com/tugenhua0707/p/8859291.html
//https://codepen.io/xyxiao001/pen/wxwKGz
//https://www.cnblogs.com/libo0125ok/p/9296011.html
//  import VueCropper from 'vue-cropper'
//import VueCropper from 'vue-cropper/src/vue-cropper.vue'

export default {
    data() {
        return {
            //剪切图片上传
            crap: false,
            previews: {},
            option: {
                emptyColor:'white',
                img: '',
                outputSize: 1, //剪切后的图片质量（0.1-1）
                full: false, //输出原图比例截图 props名full
                outputType: 'jpeg',
                canMove: true,
                original: false,
                canMoveBox: true,
                autoCrop: true,
                autoCropWidth: 150,
                autoCropHeight: 150,
                fixedBox: true
            },
            fileName: '', //本机文件地址
            downImg: '#',
            imgFile: '',
            uploadImgRelaPath: '', //上传后的图片的地址（不带服务器域名）
        }
    },
    components: {
        vueCropper:()=>import(/* webpackChunkName: "VueCropper" */ 'vue-cropper/src/vue-cropper.vue')
    },
    methods: {
        getBase64() {
            this.$refs.cropper.getCropData((data) => {
                // do something
                console.log(data)

            })
        },
        //放大/缩小
        changeScale(num) {
            console.log('changeScale')
            num = num || 1;
            this.$refs.cropper.changeScale(num);
        },
        //坐旋转
        rotateLeft() {
            console.log('rotateLeft')
            this.$refs.cropper.rotateLeft();
        },
        //右旋转
        rotateRight() {
            console.log('rotateRight')
            this.$refs.cropper.rotateRight();
        },
        //上传图片（点击上传按钮）
        finish(type) {
            console.log('finish')
            let _this = this;
            let formData = new FormData();
            // 输出 
            if (type === 'blob') {} else {
                this.$refs.cropper.getCropData((data) => {
                    this.model = true;
                    this.modelSrc = data;
                })
            }
        },
        // 实时预览函数 
        realTime(data) {
            console.log('realTime')
                 console.log(data)
            this.previews = data
        },
   
        //选择本地图片
        uploadImg(e, num) {
            console.log('uploadImg');
            var _this = this;
            //上传图片 
            var file = e.target.files[0]
            _this.fileName = file.name;
            if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                return false
            }
            var reader = new FileReader();
            reader.onload = (e) => {
                let data;
                if (typeof e.target.result === 'object') {
                    // 把Array Buffer转化为blob 如果是base64不需要 
                    data = window.URL.createObjectURL(new Blob([e.target.result]))
                } else {
                    data = e.target.result
                }
                if (num === 1) {
                    _this.option.img = data
                } else if (num === 2) {
                    _this.example2.img = data
                }
            }
            // 转化为base64 
             reader.readAsDataURL(file) 
            // 转化为blob 
            // reader.readAsArrayBuffer(file);

        },
        imgLoad(msg) {
            console.log('imgLoad')
            console.log(msg)
        }
    },

}
</script>

<style scoped>
.info-item {
    font-size:0;
    margin-top: 15px;
}

.cropper-content {
    display: flex;
    display: -webkit-flex;
    /* justify-content: center;
    -webkit-justify-content: center; */
}

.cropper-content .cropper {
    width: 260px;
    height: 260px;
}

.cropper-content .show-preview {
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;

}
.box-preview{
    display: flex;
    display: -webkit-flex;
    margin-left:20px;
    }
.cropper-content .show-preview{
    width:155px;
    height:155px;
    overflow:hidden;
    margin:5px;
}
.cropper-content .show-preview .preview {
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
}
.cropper-content .show-preview .preview-square {
    overflow: hidden;
    border-radius: 0;
    border: 1px solid #ccc;
    background: #fff;
}
.btn{
    cursor:pointer;
    vertical-align:middle;
    font-size:14px;display:inline-block;width: 70px;padding: 0;text-align: center;height:28px;line-height: 28px;background-color: #f44f7f;color:#fff;border-radius:2px;border:none;
  
}
.btn-blue{background-color: #38f;}
.btn-orange{background-color: #fe7300;}
.btn:hover{opacity:0.8;}
.btn:not(:last-child){margin-right:10px;}
</style>
